<template>
  <div>
    <div class="background">
      <img class="back" src="../assets/img/back.jpeg">
    </div>
    <div class="body">
      <div class="p_message">
        <div class=" p_picture">
          <img class="headPicture" src="../assets/img/head.png">
        </div>
        <div class=" p_name">用户名：{{name}}</div>
        <div class=" p_id">id: {{id}}</div>
      </div>

      <div class="Button_O">
        <button class="button button_o" @click="toOrder">我的订单
        </button>
      </div>
      <div class="Button_A">
        <button class="button button_a" @click="toUserAllAddress">收货地址
        </button>
      </div>
      <div class="Button_E">
        <button class="button button_e"@click="outLogin">退出登录
        </button>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'UserCenter',
    data() {
      return {
        name: this.$store.state.user.uname,
        id: this.$store.state.user.uid,
      }
    },
    methods: {
      //去用户的地址列表
      toUserAllAddress () {
        this.$router.replace('/UserAllAddress')
      },
      //去订单列表
      toOrder(){
        this.$router.replace('/OrderNavigation/UserOrder')
      },
      //退出登录方法
      outLogin() {
        this.$message.success("退出登录成功");
        this.$router.replace('/');
        //清除token和merchant对象
        this.$store.commit('REMOVE_INFO');
      }
    }
  }
</script>

<style scoped>
  .background {
    width: 341px;
    height: 608px;
    z-index: -1;
    position: absolute;
  }

  .back {
    width: 341px;
    height: 608px;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .body {
    z-index: -1;
    position: absolute;
  }

  .p_message {
    position: absolute;
    width: 341px;
    height: 100px;
    top: 0px;
    left: 0px;
    /* background-color:rgb(156, 154, 156) ; */
  }

  .p_picture {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;

  }

  .headPicture {
    width: 80px;
    height: 80px;
  }

  .p_name {
    position: absolute;
    width: 120px;
    height: 20px;
    top: 10px;
    left: 140px;

  }

  .p_id {
    position: absolute;
    width: 120px;
    height: 20px;
    top: 50px;
    left: 140px;

  }

  .Button_O {
    position: absolute;
    height: 50px;
    width: 250px;
    top: 200px;
    left: 50px;
    background-color: antiquewhite;
  }

  .Button_A {
    position: absolute;
    height: 50px;
    width: 250px;
    top: 300px;
    left: 50px;
    background-color: antiquewhite;
  }

  .Button_E {
    position: absolute;
    height: 50px;
    width: 250px;
    top: 400px;
    left: 50px;
    background-color: antiquewhite;
  }

  .button {
    border: none;
    color: black;
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    background-color: rgb(245, 212, 142);
    width: 250px;
    height: 50px;
  }
</style>
